<style scoped lang="less">
@import "./login.less";
</style>

<template>
  <div class="login" @keydown.enter="handleSubmit('formValidate')" ref="divHeight">
    <div class="login-con">
        <el-card class="box-card" :bordered="false">
          <div class="form-con">
            <el-form ref="formValidate" :model="formValidate" :rules="formValidate" >
              <h3 class="title">系统登录</h3>
              <el-form-item  prop="username">
                <el-input v-model="formValidate.username" placeholder="请输入账号">
                  <span slot="prepend"><i class="el-icon-user-solid"></i></span>
                </el-input>
              </el-form-item>
              <el-form-item  prop="password">
                <el-input v-model="formValidate.password" placeholder="请输入密码" show-password>
                  <span slot="prepend"><i class="el-icon-s-goods"></i></span>
                </el-input>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" @click.native="handleSubmit('formValidate')" style="width: 100%;">登录</el-button>
              </el-form-item>
            </el-form>
             <p class="login-tip">输入任意用户名和密码即可</p>
          </div>
        </el-card>
    </div>
  </div>
</template>

<script>
import axios from "@/axios";
import { getmd5, guid, yzMobile, yzPwd, getHeaders } from "@/assets/js/common";
export default {
  data() {
    return {
      formValidate: {
        username: "",
        password: ""
      },
      ruleValidate: {
        username: [
          {
            required: true,
            message: "账号不能为空！",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    let clientHeight = document.documentElement.clientHeight;
    this.$refs.divHeight.style.height = clientHeight + "px";
  },
  methods: {
    //提交数据
    handleSubmit(name) {
      let vm = this;
      if (!yzPwd(vm.formValidate.password)) {
        vm.$message.error("请输入6-16位有字母、数组、字符组成的密码");
        return false;
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          axios
            .post("/admin/login", {
              username: vm.formValidate.username,
              password: getmd5(vm.formValidate.password)
            })
            .then(response => {
              // let status = response.status;
              let data = response.data;
              if (data.code == 200) {
                localStorage._token = data.data.token;
                this.$message({
                  message: '登录成功',
                  type: 'success',
                  onClose: function(msg) {
                    vm.$router.push({ name: "index" });
                  }
                });
              } else {
                vm.formValidate.password = "";
                vm.$message.error(data.message);
              }
            })
            .catch(error => {
              // vm.$Message.error("网络或服务器异常");
            });
        } else {
          // vm.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>

<style>
</style>
